<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <el-row style="margin-top: 10px;margin-bottom: 10px ">
            <el-col :span="24">
              <el-button type="primary" @click="dialogVisible=true">上传</el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog
      title="文件上传"
      :visible.sync="dialogVisible"
      center
      width="35%">
      <div style="text-align: center">
        <el-upload
          action
          class="upload-demo"
          drag
          :on-change="fileChange"
          :auto-upload="false"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">上次表设计文档</div>
        </el-upload>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="httpRequest">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
    export default {
        name: 'file',
        data() {
            return {
                form: {
                    fileName: '',
                    current: 1,
                    size: 10
                },
                fileDataList: [],
                dialogVisible: false,
                file: ''
            }
        },
        methods: {
            // 上传文件
            httpRequest() {
                if (this.file == null) {
                    this.$message.warning('请选择需要上传的文件');
                    return false;
                }
                let params = new FormData();
                params.append('file', this.file);
                let config = {
                    headers: {'Content-Type': 'multipart/form-data'}
                };
                this.post('/uploadFile', params, (res) => {
                    console.log(res)
                    if (res.code == 0 ) {
                        this.$message.success('文件上传成功');
                        this.dialogVisible = false;
                    }
                });

            },
            fileChange(file, fileList) {
                this.file = file.raw;
            },
        },
        created() {
           
        }
    }
</script>
<style scoped>
</style>